<template>
    <el-row class="demo1" :gutter="20" type="flex">
        <el-col class="demo1-item" :span="leftSpan">
            <el-card shadow="never">
                <div slot="header">
                    <span>示例</span>
                    <div style="float: right;">
                        <el-button size="mini" 
                            icon="el-icon-refresh" 
                            @click="exampleChange"></el-button>
                        <el-button size="mini" 
                            :icon="isOpen ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" 
                            @click="toggleExample"></el-button>
                    </div>
                </div>
                <ExampleTpl ref="example"></ExampleTpl>
            </el-card>
        </el-col>
        <el-col class="demo1-item" :span="rightSpan">
            <el-card shadow="never" class="code-card">
                <div slot="header">
                    <span>代码 </span>
                    <el-button size="mini" 
                        :icon="!isOpen ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" 
                        @click="toggleCode"></el-button>
                    <el-button type="text" size="mini" style="float: right;" @click="cooyCode">复制</el-button>
                </div>
                <div class="markdown-body">
                    <CodeTpl ref="code" id="code"></CodeTpl>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import ExampleTpl from './demo.vue';
import CodeTpl from './code.md';

export default {
    components: {
        ExampleTpl,
        CodeTpl
    },
    data() {
        return {
            isOpen: false,
            leftSpan: 24,
            rightSpan: 0
        }
    },
    methods: {
        exampleChange() {
            this.$refs.example.toggleModel()
        },
        toggleExample() {
            if(this.isOpen) {
                this.leftSpan = 24;
                this.rightSpan = 24 - this.leftSpan;
            } else {
                this.leftSpan = 12;
                this.rightSpan = 24 - this.leftSpan;
            }
            this.isOpen = !this.isOpen;
        },
        toggleCode() {
            if(this.isOpen) {
                this.rightSpan = 24;
                this.leftSpan = 24 - this.rightSpan;
            } else {
                this.rightSpan = 12;
                this.leftSpan = 24 - this.rightSpan;
            }
            this.isOpen = !this.isOpen;
        },
        cooyCode() {
            const section = document.getElementById('code');
            const code = section.querySelector('code').innerText;
            if(this.copyText(code)) {
                this.$message({
                    type: 'success',
                    message: '复制成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '复制失败'
                })
            }
        },
        copyText(text) {
            var textarea = document.createElement("input");//创建input对象
            var currentFocus = document.activeElement;//当前获得焦点的元素
            var flag = false;
            document.body.appendChild(textarea);//添加元素
            textarea.value = text;
            textarea.focus();
            if(textarea.setSelectionRange)
                textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
            else
                textarea.select();
            try {
                flag = document.execCommand("copy");//执行复制
            } catch(eo) {
                flag = false;
            }
            document.body.removeChild(textarea);//删除元素
            currentFocus.focus();
            return flag;
        }
    },
}
</script>

<style lang="scss" scoped>
.demo1{
    margin-bottom: 60px;
    .demo1-item{
        transition: width .1s;
    }
}
.code-card{
    height: 100%;
    min-height: 100vh;
    /deep/.el-card__body{
        height: 100%;
        position: relative;
        box-sizing: border-box;
        padding: 0;
        overflow: scroll;
    }
    .markdown-body{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}
</style>